<template>
    <div class="top-nav">
        <!-- 顶部导航组件 -->
      <div class="menu-item" v-for="menu in menus" :key="menu.path" @click="$emit('menu-click', menu)">
        <i class="icon" :class="menu.icon"></i>
        <span class="title">{{ menu.title }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      menus: {
        type: Array,
        required: true,
        default: () => [
          {
            title: '首页',
            path: '/',
            icon: 'home'
          },
          {
            title: '逆向常用工具',
            path: '/reverse',
            icon: 'tools'
          },
          {
            title: '代码重复使用',
            path: '/code-reuse',
            icon: 'code'
          }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .top-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    height: auto;
    padding: 10px;
    flex-wrap: wrap; /* 允许导航项换行 */
  }
  
  .menu-item {
    padding: 8px;
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .top-nav {
      height: 60px;
      padding: 0 20px;
      flex-wrap: nowrap;
    }
    
    .menu-item {
      padding: 0 10px;
      font-size: inherit;
    }
  }
  </style>